<!--中标项目-->
<template>
  <div>
    <div style="display: flex; max-height: 20px; margin-left: -20px">
      <h5 style="margin-left: 30px">项目编号</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目编号" v-model="projectNumber"></el-input>
      <h5 style="margin-left: 30px">项目名称</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目名称" v-model="projectName" ></el-input>
      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex;">
      <el-table :data="tableData" style="margin-top: 10px" height="500">
        <el-table-column fixed label="序号"  width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="projectNumber" label="项目编号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>

        <el-table-column prop="quantity" label="数量" width="50"></el-table-column>
        <el-table-column prop="budget" label="成交单价（万元）"></el-table-column>
        <el-table-column prop="budgetT" label="成交总价（万元）"></el-table-column>
        <el-table-column prop="projectType" label="项目类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.projectType === '工程'">工程</span>
            <span v-else-if="scope.row.projectType === '耗材'">耗材</span>
            <span v-else-if="scope.row.projectType === '设备'">设备</span>
            <span v-else-if="scope.row.projectType === '维护'">维护</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="tenderOfficer" label="招标负责人"></el-table-column>
        <el-table-column prop="phoneNumber" label="联系电话" width="250"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="success" @click="handleLook(scope.row)">查看</el-button>
            <!-- 上传承诺书 -->
            <el-button type="primary" @click="uploadEnsure(scope.row)">上传承诺书</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 800px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20,30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
<!--    查看-->
    <el-dialog :visible.sync="dialogLookVisible"
               style="text-align: center;"
               width="1000"
    >
      <div class="dialog-title" style="margin-top: -40px">{{ lookForm.dialogTitle }}</div>
      <el-descriptions title="" style="display: inline-block;" column="4" size="small" border>
        <el-descriptions-item label="项目预算（万元）">{{lookForm.budget}}</el-descriptions-item>
        <el-descriptions-item label="采购人">{{ lookForm.applyingDepartment }}</el-descriptions-item>
        <el-descriptions-item label="开标时间" :contentStyle="{'text-align': 'right'}">{{ lookForm.meetTime }}</el-descriptions-item>
        <el-descriptions-item label="进度">
          <span v-if="lookForm.status === 1">待公告</span>
          <span v-else-if="lookForm.status === 2">已公告</span>
          <span v-else-if="lookForm.status === 3">待公示</span>
          <span v-else-if="lookForm.status === 4">已公示</span>
          <span v-else-if="lookForm.status === 5">已完成</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-card style="text-align: left;">
        <h3 style="margin-bottom: 10px">中标人</h3>
        <el-table :data="lookData" style="margin-bottom: 20px">
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="dealer" label="中标人"></el-table-column>
          <el-table-column prop="finalMoney" label="最终报价（元）"></el-table-column>
          <el-table-column prop="score" label="得分"></el-table-column>
          <el-table-column prop="phoneNumber" label="联系电话"></el-table-column>
        </el-table>
        <span>说明：</span>
        <span>{{lookForm.procurementText}}</span>
      </el-card>
      <el-card style="text-align: left; margin-top: 20px">
        <h3 style="margin-bottom: 10px">公告内容</h3>
        <el-descriptions style="display: inline-block;" column="1" size="small">
          <el-descriptions-item label="公告名称">{{lookForm.announcementName}}</el-descriptions-item>
          <el-descriptions-item label="公告内容">{{ lookForm.announcementText }}</el-descriptions-item>
          <el-descriptions-item label="附件">
            <a :href="lookForm.announcementFileUrl" target="_blank">附件下载</a>
          </el-descriptions-item>

        </el-descriptions>
      </el-card>
    </el-dialog>
<!--    上传承诺书-->
    <el-dialog :visible.sync="dialogUploadVisible"
               :custom-class="'slide-right-dialog'"
               width="30%"
    >
      <div class="dialog-title" style="margin-top: -40px">{{ uploadForm.dialogTitle }}</div>
      <h1 style="margin-bottom: 20px">上传承诺书</h1>
      <el-upload
          :action="'http://'+serverIp() + ':8081/jdyfy/file/upload'"
          :show-file-list="true"
          :on-success="handleAnnounFile"
          :on-error="handleAnnounFileError">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitUpload">确认提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addWinnotiProject, getWinnotiByProjectNumber, getWinnotiProjectByDealerPage} from "@/api/project";
import {getUserByName} from "@/api/user";
import {getMeetByProjectName} from "@/api/meet";
import {getAnnouncementByName} from "@/api/announcement";
import {serverIp} from "../../../../public/config.js";

export default {
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      tableData: [],
      procurementMethod:'',
      projectNumber: "",
      projectName: "",
      pageNum: 1,
      total: 0,
      pageSize: 10,
      dialogLookVisible: false,
      dialogUploadVisible: false,
      lookForm: {},
      lookData: [],
      uploadForm: {},
      fileUrl: '',
    };
  },
  created() {
    this.init();
  },
  methods: {
    serverIp() {
      return serverIp
    },
    async init() {
      try {
        // 获取项目信息
        const res = await getWinnotiProjectByDealerPage(this.pageNum, this.pageSize, this.projectName, this.projectNumber, this.user.department);
        this.tableData = res.records;
        console.log(this.tableData);

        // 使用 Promise.all 来并行请求获取电话和预算
        const promises = this.tableData.map(async (t) => {
          try {
            const user = await getUserByName(t.tenderOfficer);
            this.$set(t, 'phoneNumber', user.phoneNumber);  // 使用 this.$set 更新数据
            this.$set(t, 'budgetT', parseInt(t.budget) * parseInt(t.quantity));  // 计算预算
          } catch (error) {
            console.error(`Error fetching phone for tender officer ${t.tenderOfficer}:`, error);
            this.$set(t, 'phoneNumber', "Unknown");
          }
        });

        // 等待所有异步请求完成
        await Promise.all(promises);
        // 设置总数
        this.total = res.total;
      } catch (error) {
        console.error("Error fetching winnoti project data:", error);
      }
      console.log(this.tableData);
    },
    async handleLook(row) { // 查看项目详情
      console.log(row)
      this.lookForm = row;
      this.lookForm.dialogTitle = `${row.projectName}(招标项目编号：${row.projectNumber})`
      await getWinnotiByProjectNumber(row.projectNumber).then(res => {
        this.lookData = [{
          type: '中标人',
          dealer: res.dealer,
          finalMoney: res.finalMoney,
          score: res.score,
          phoneNumber: row.phoneNumber
        }]
      })
      await getAnnouncementByName(row.projectName).then(res => {
        console.log(res)
        this.lookForm.announcementName = res.announcementName
        this.lookForm.announcementText = res.announcementText
        this.lookForm.announcementFileUrl = res.announcementFileUrl
      })
      this.lookForm.procurementText = row.procurementText ? row.procurementText : "暂无";
      this.dialogLookVisible = true;
    },
    uploadEnsure(row){ // 上传承诺书
      this.uploadForm = row;
      this.uploadForm.dialogTitle = row.projectName
      this.dialogUploadVisible = true;
    },
    submitUpload() { // 确认提交
        this.uploadForm.ensureFileUrl = this.fileUrl !== '' ? this.fileUrl : this.uploadForm.ensureFileUrl;
        this.fileUrl = ''
        addWinnotiProject(this.uploadForm).then(res => {
          if (res) {
            this.$message({
            message: "上传成功",
            type: 'success'
          });}

        })
    },
    handleSizeChange(val) { // 改变页码
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) { // 改变每页显示条数
      this.pageNum = val;
      this.init();
    },
    handleAnnounFile(row){
      this.fileUrl = row
      this.$message.success('文件添加成功')
    },
    handleAnnounFileError(err, file, fileList) {
      // 上传失败的处理逻辑
      this.$message.error('文件上传失败，请重试，可能和文件大小或者类型有关');
    },
    reset() {
      this.projectName = '';
      this.projectNumber = '';
      this.init();
    }
  }
};
</script>

<style scoped>
>>> .slide-right-dialog {
  top: -105px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 700px;
  width: 600px;
  animation: slide-right 0.3s ease;
}
>>> .slide-right-dialog .el-dialog__title {
  font-size: 14px; /* 调整对话框正文内容的字体大小 */
}
</style>
